import React, {PureComponent} from 'react';
import {Button, Divider, Form, Icon, message, Popconfirm, Table, Tooltip} from 'antd';
import {connect} from 'dva';

@connect(state => ({
  role: state.role,
}))
class StandardTable extends PureComponent {
  state = {
    selectedRowKeys: []
  };

  handleOnClick = (record, key) => {
    const {onEditItem, dispatch} = this.props;
    if (key === "edit") {
      onEditItem(record, true)
    } else if (key === "del") {
      dispatch({
        type: 'role/remove',
        payload: {id: record.id},
        callback: (resultData) => {
          if (resultData.resultCode === "1") {
            message.success('删除成功');
          } else {
            message.success('删除失败');
          }
        },
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({selectedRowKeys});
  }

  render() {
    const {selectedRowKeys} = this.state;
    const {data: {rows}, loading, onOpenMenuModel} = this.props;

    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        align:'center'
      },
      {
        title: '编号',
        dataIndex: 'code',
        align:'center'
      },
      {
        title: '类型',
        dataIndex: 'type',
        align:'center',
        render:(val)=>{
          switch (val){
            case 'SYSTEM_ROLE': return <span style={{color:'#f10610'}}>系统角色</span>;
            case 'MASTER_ROLE': return <span style={{color:'#f19222'}}>主帐户角色</span>;
            case 'SUB_ROLE': return <span style={{color:'#4869f1'}}>子帐户角色</span>;
            default : return val;
          }
        }
      },
      {
        title: '操作',
        width: 130,
        align:'center',
        render: (record) => (
          <div style={{width: 125}}>
            <Tooltip placement="top" title='修改'>
              <Button style={{padding: 0}} type="link" onClick={() => this.handleOnClick(record, 'edit')}><span><Icon
                type="edit"/></span></Button>
            </Tooltip>
            <Divider type="vertical"/>
            <Popconfirm title="确定要删除该菜单吗？" onConfirm={() => this.handleOnClick(record, 'del')}>
              <Tooltip placement="top" title='删除'>
                <Button style={{padding: 0}} type="link"><span style={{color: '#f13d74'}}><Icon
                  type="delete"/></span></Button>
              </Tooltip>
            </Popconfirm>
            <Divider type="vertical"/>
            <Tooltip placement="top" title='配置菜单'>
              <Button style={{padding: 0}} type="link" onClick={() => onOpenMenuModel(record)}><span
                style={{color: '#f13d74'}}>配置菜单</span></Button>
            </Tooltip>
          </div>
        ),
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <Table
        size="small"
        loading={loading}
        rowKey={record => record.id}
        rowSelection={rowSelection}
        dataSource={rows}
        columns={columns}
        pagination={false}
      />
    );
  }
}

export default StandardTable;
